<template>
    <div v-if="visible" class="overlay">
        <div class="dialog">
            <h3 class="dialog-title">请选择用于关系标注的模型</h3>
            <div class="custom-select">
                <div class="selected" @click="toggleDropdown">
                    <span v-if="selectedModelName">{{ selectedModelName }}</span>
                    <span v-else>请选择模型</span>
                    <span class="arrow">▼</span>
                </div>
                <div v-if="dropdownOpen" class="options">
                    <div v-for="model in models" :key="model.id" class="option" @click="selectModel(model)">
                        <img :src="require(`@/assets/Picture/DocumentManagement/${model.image}`)" alt=""
                            class="model-icon" />
                        {{ model.name }}
                    </div>
                </div>
            </div>
            <div class="dialog-buttons">
                <button @click="close">取消</button>
                <button @click="confirm">确定</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    emits: ['close', 'update:visible'],
    data() {
        return {
            selectedModel: null,
            selectedModelName: '',
            dropdownOpen: false,
            models: [
                { id: 1, name: '预训练模型：古汉语关系', image: 'book.png' },
                { id: 2, name: '预训练模型：现代汉语关系', image: 'book.png' }
                // 添加更多模型选项和对应的图片路径
            ]
        };
    },
    methods: {
        toggleDropdown() {
            this.dropdownOpen = !this.dropdownOpen;
        },
        selectModel(model) {
            this.selectedModel = model.id;
            this.selectedModelName = model.name;
            this.dropdownOpen = false;
        },
        confirm() {
            console.log('选择的关系标注模型:', this.selectedModel);
            this.$emit('close');
            this.$emit('update:visible', false);
        },
        close() {
            this.$emit('close');
            this.$emit('update:visible', false);
        }
    }
}
</script>

<style scoped>
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.dialog {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

.dialog-title {
    margin: 0 0 10px;
    text-align: left;
}

.custom-select {
    position: relative;
    margin: 20px 0;
}

.selected {
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.arrow {
    font-size: 12px;
}

.options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background-color: white;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
}

.option {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.option:hover {
    background-color: #f5f5f5;
}

.model-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.dialog-buttons button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.dialog-buttons button:first-child {
    background-color: #f5f5f5;
}

.dialog-buttons button:last-child {
    background-color: #4caf50;
    color: white;
}
</style>
